<template>

    <el-card class="box-card">
        <el-row :gutter="10">


            <el-col :span="2.5">

                <el-select
                        v-model="hospitalId"
                        placeholder="请选择医院"
                        size="medium"
                        style="width: 180px"
                        @change="selectDepartment"
                >
                    <el-option
                            v-for="item in hospitalList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    />
                </el-select>

            </el-col>


            <el-col :span="2">
                <el-select
                        v-model="departmentId"
                        placeholder="请选择科室"
                        size="medium"
                        style="width: 180px"
                        @change="confirmDepartment"
                >
                    <el-option
                            v-for="item in departmentList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    />
                </el-select>
            </el-col>


            <el-col :span="6">
                <el-input v-model="name" placeholder="请输入姓名"></el-input>
            </el-col>
            <div class="btn">
                <el-button type="info" @click="clear">重置</el-button>
                <el-button type="primary" @click="getDockerList()">查询</el-button>
                <el-button type="success" @click="add">新增</el-button>

            </div>
        </el-row>


    </el-card>


    <el-card class="box-card2">
        <el-table
                :data="dockerList"
                style="width: 100%">
            <el-table-column
                    align="center"
                    prop="id"
                    label="序号"
            >
            </el-table-column>


            <el-table-column
                    align="center"
                    prop="hospitalName"
                    label="医院"
            >
            </el-table-column>


            <el-table-column
                    align="center"
                    prop="departmentName"
                    label="科室"
            >

            </el-table-column>

            <el-table-column
                    align="center"
                    prop="name"
                    label="姓名"
            >
            </el-table-column>


            <el-table-column
                    align="center"
                    prop="detail"
                    label="详情">
            </el-table-column>


            <el-table-column
                    header-align="center"
                    align="center"
                    label="照片">
                <template v-slot="scope">
                    <img :src="scope.row.photopath" width="100px">
                </template>
            </el-table-column>


            <el-table-column label="操作" width="200" align="center">
                <template #default="{ row }">

                    <div class="mybtn">

                        <el-button plain type="warning" @click="update(row)" class="smallbtn">编辑
                        </el-button>

                        <el-button plain type="danger" @click="del(row)" class="smallbtn">删除
                        </el-button>

                    </div>
                </template>

            </el-table-column>


            <template #empty>
                <el-empty description="没有数据"/>
            </template>

        </el-table>

        <el-pagination class="fenye"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       v-model:current-page="pageNum"
                       v-model:page-size="pageSize"
                       :page-sizes="[2, 4, 6, 8]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>

    </el-card>


    <el-dialog title="添加医生" v-model="dialogFormVisible" @close="clear()" width="1800px">
        <div class="ccc">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
                <el-form-item label="医院" prop="name">
                    <el-select
                            v-model="form.hospitalId"
                            placeholder="请选择医院"
                            size="medium"
                            style="width: 180px"
                            @change="selectDepartment2"
                    >
                        <el-option
                                v-for="item in hospitalList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>

                </el-form-item>
                <el-form-item label="科室" prop="departmentId">
                    <el-select
                            v-model="form.departmentId"
                            placeholder="请选择科室"
                            size="medium"
                            style="width: 180px"

                    >
                        <el-option
                                v-for="item in departmentList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>


                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="detail">
                    <el-input type="textarea" placeholder="请输入医生简介" v-model="form.detail"></el-input>
                </el-form-item>


                <el-form-item label="照片" :label-width="formLabelWidth">
                    <el-upload

                            ref="upload"
                            class="upload-demo"
                            action=""
                            :on-change="handleChange"
                            :auto-upload="false"
                            :show-file-list="false"


                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip"> &nbsp;只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>


            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click=clear>取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>

        </div>

    </el-dialog>


    <el-dialog title="修改医生" v-model="dialogFormVisibleUpdate" @close="clear2()" width="1800px">

        <div class="ccc">
            <el-form :model="formUpdate" ref="formRefUpdate" :rules="rulesUpdate" label-width="100px">
                <el-form-item label="医院" prop="name">
                    <el-select
                            v-model="formUpdate.hospitalId"
                            placeholder="请选择医院"
                            size="medium"
                            style="width: 180px"
                            @change="selectDepartment2"
                    >
                        <el-option
                                v-for="item in hospitalList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>

                </el-form-item>


                <el-form-item label="科室" prop="departmentId">
                    <el-select
                            v-model="formUpdate.departmentId"
                            placeholder="请选择科室"
                            size="medium"
                            style="width: 180px"
                            @change="selectDepartment"
                    >
                        <el-option
                                v-for="item in departmentList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>


                </el-form-item>


                <el-form-item label="姓名" prop="name">
                    <el-input v-model="formUpdate.name"></el-input>
                </el-form-item>


                <el-form-item label="简介" prop="detail">
                    <el-input type="textarea" placeholder="请输入医生简介" v-model="formUpdate.detail"></el-input>
                </el-form-item>


                <el-form-item label="照片" :label-width="formLabelWidth">
                    <el-upload
                            class="upload-demo"
                            action=""
                            :on-change="handleChange"
                            :auto-upload="false"
                            :show-file-list="false"
                    >
                        <img :src="formUpdate.photopath" width="100">

                    </el-upload>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click=clear>取 消</el-button>
                <el-button type="primary" @click="saveUpdate()">确 定</el-button>
            </div>

        </div>

    </el-dialog>


</template>

<script setup>
    import {ref, reactive, onMounted} from "vue"
    import axios from 'axios'
    import {Plus} from '@element-plus/icons-vue'

    const hospitalList = ref([])
    const hospitalId = ref('')
    const departmentList = ref([])
    const departmentId = ref('')

    const name = ref('')

    const dockerList = ref([])
    const pageNum = ref(1)
    const pageSize = ref(2)
    const total = ref('')

    const dialogFormVisible = ref(false)
    const form = ref({})
    const formRef = ref()

    const file = ref({})


    let fd = new FormData()



    onMounted(async () => {
        const res = await axios.get('/hospital/findAll')
        hospitalList.value = res.data.data
        getDockerList()
    })


    const selectDepartment = async () => {
        const res = await axios.get('/department/findByHospitalId/' + hospitalId.value)
        departmentList.value = res.data.data
        departmentId.value = ''
        getDockerList()

    }

    const selectDepartment2 = async () => {
        const res = await axios.get('/department/findByHospitalId/' + form.value.hospitalId)
        departmentList.value = res.data.data
        departmentId.value = ''
        getDockerList()

    }


    const getDockerList = async () => {

        const res2 = await axios.get('/user?pageNum=' + pageNum.value + "&pageSize=" + pageSize.value + '&hospitalId=' + hospitalId.value + '&departmentId=' + departmentId.value + '&name=' + name.value)

        dockerList.value = res2.data.data.items
        total.value = res2.data.data.total

    }

    const confirmDepartment = () => {
        getDockerList()
    }

    const handleSizeChange = async (ps) => {
        pageSize.value = ps
        getDockerList()
    }


    const handleCurrentChange = async (num) => {
        pageNum.value = num
        getDockerList()
    }

    const clear = () => {
        hospitalId.value = ''
        departmentId.value = ''
        name.value = ''
        dialogFormVisible.value = false
        dialogFormVisibleUpdate.value = false

        getDockerList()
        form.value = {}

        formUpdate.value = {}

        file.value = {}
        formRef.value.resetFields();

    }

    const formRefUpdate = ref()


    const clear2 = () => {
        hospitalId.value = ''
        departmentId.value = ''
        name.value = ''
        dialogFormVisible.value = false
        dialogFormVisibleUpdate.value = false

        getDockerList()
        form.value = {}

        formUpdate.value = {}

        file.value = {}
        formRefUpdate.value.resetFields();
    }



    const add = () => {
        dialogFormVisible.value = true
    }


    const save = async () => {
        console.log(file.value)

        await formRef.value.validate()
        for (let key in form.value) {
            fd.append(key, form.value[key])
        }

        if (Object.keys(file.value).length === 0) {
            const res = await axios.post('/user/add2', fd)
        } else {
            fd.append('photopath', file.value.raw)
            const res = await axios.post('/user', fd)
        }


        fd = new FormData()
        clear()
        ElMessage.success('添加医生成功')

    }


    const del = async (item) => {
        await ElMessageBox.confirm('你确认要删除该医生么', '温馨提示', {
            type: 'warning',
            confirmButtonText: '确认',
            cancelButtonText: '取消'
        })

        const res = await axios.delete('user/' + item.id)
        ElMessage.success('删除医生成功')
        clear()
    }


    const selectDepartment3 = async () => {
        const res = await axios.get('/department/findByHospitalId/' + formUpdate.value.hospitalId)
        departmentList.value = res.data.data
        departmentId.value = ''
        getDockerList()

    }


    const dialogFormVisibleUpdate = ref(false)
    const formUpdate = ref({})

    const update = (item) => {
        dialogFormVisibleUpdate.value = true
        formUpdate.value = item
        selectDepartment3()
        selectDepartment3()
        console.log(formUpdate.value)
    }


    function handleChange(f) {       file.value = f
        console.log(file.value);
        ElMessage.success('上传图片成功')
    }


    function urlToBinary(url) {
        const encoder = new TextEncoder();
        const binaryData = encoder.encode(url);
        return binaryData;
    }

    const saveUpdate = async () => {

        for (let key in formUpdate.value) {
            fd.append(key, formUpdate.value[key])
        }


        if (file.value.raw) {
            fd.append('photopath', file.value.raw)
            const res = await axios.put('/user', fd)

            fd = new FormData()

        } else {

            const res = await axios.put('/user/raw', fd)
            fd = new FormData()

        }


        ElMessage.success('修改医生成功')

        clear()

    }

    const rules = ref({
        departmentId: [
            {required: true, message: '请选择科室', trigger: 'blur'},

        ],

        name: [
            {required: true, message: '请输入医生名', trigger: 'blur'},
            {
                pattern: /^\S{2,10}/,
                message: '课程名长度在2-10个非空字符',
                trigger: 'blur'
            }
        ],

        dockerId: [
            {required: true, message: '请选择医生', trigger: 'blur'},

        ],

        detail: [
            {required: true, message: '请输入医生简介', trigger: 'blur'},

        ],

        photopath: [
            {required: true, message: '请上医生传照片', trigger: 'blur'},

        ],
    })


    const rulesUpdate = ref({
        departmentId: [
            {required: true, message: '请选择科室', trigger: 'blur'},

        ],

        name: [
            {required: true, message: '请输入医生名', trigger: 'blur'},
            {
                pattern: /^\S{2,10}/,
                message: '课程名长度在2-10个非空字符',
                trigger: 'blur'
            }
        ],

        dockerId: [
            {required: true, message: '请选择医生', trigger: 'blur'},

        ],

        detail: [
            {required: true, message: '请输入医生简介', trigger: 'blur'},

        ],

        photopath: [
            {required: true, message: '请上医生传照片', trigger: 'blur'},

        ],
    })






</script>

<style scoped lang="scss">

    .box-card {
        margin-top: 15px;
    }


    .box-card2 {
        margin-top: 15px;
        height: 700px;
    }

    .fenye {
        margin-top: 30px;
        margin-left: 33%;
    }


    .ccc {
        width: 400px;

        margin: 10px auto;

        /*background-color: skyblue;*/
    }


</style>
